<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'机电设备'"></contentTitle>
        <div class="dy-md">
          <div class="dy-md4" v-for="(row,index) in dataList">
            <div class="dy-md4-pic">
              <img :src="row.path" alt="" />
              <div class="text">{{row.wz}}</div>
            </div>
            <div class="dy-md4-info">
              <div class="dy-md4-info-wd">{{row.zs}}</div>
              <div class="dy-md4-info-text">总数</div>
            </div>
            <div class="dy-md4-info">
              <div class="dy-md4-info-wd">{{row.zx}}</div>
              <div class="dy-md4-info-text">在线</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

import jk from '../../../assets/img/sale_more/monitor.png'
import gb from '../../../assets/img/sale_more/broadcast.png'
import led from '../../../assets/img/sale_more/led.png'
import zm from '../../../assets/img/sale_more/lighting.png'


const dataList = ref([{
    path: jk,
    wz: '监控',
    zs: 0,
    zx: 0
  },{
    path: gb,
    wz: '广播',
    zs: 0,
    zx: 0
  },{
    path: led,
    wz: 'LED屏',
    zs: 0,
    zx: 0
  },{
    path: zm,
    wz: '照明',
    zs: 0,
    zx: 0
  }]);

onMounted(() => {
  getData();
})


async function getData() {
  const res = await ajaxRequest('post', 'getJdsbxxZhkbfwq', {})
  if (res.data) {
    //监控
    if (res.data.jk_zs) {
      dataList.value[0].zs = res.data.jk_zs
      dataList.value[0].zx = (res.data.jk_zs*0.9).toFixed(0) //监控在线数 = 总数*0.9
    }
    //广播
    if (res.data.gb_zs) {
      dataList.value[1].zs = res.data.gb_zs
    }
    if (res.data.gb_zx) {
      dataList.value[1].zx = res.data.gb_zx
    }
    //led
    if (res.data.led_zs) {
      dataList.value[2].zs = res.data.led_zs
    }
    if (res.data.led_zx) {
      dataList.value[2].zx = res.data.led_zx
    }
    //照明
    if (res.data.zm_zs) {
      dataList.value[3].zs = res.data.zm_zs
    }
    if (res.data.zm_zx) {
      dataList.value[3].zx = res.data.zm_zx
    }
  }

}
</script>

<style scoped>
  .dy-panel-main{
    padding:2.5vh;
  }
  .dy-md{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
    .dy-md4{
      width: 45%;
      display: flex;
      border: 1px solid #00EAFF;
      margin: 10px;
      justify-content: space-around;
    }
    .dy-md4-pic{
      display: flex;
      flex-wrap: wrap;
      width: 35px;
      text-align: center;
      justify-content: center;
      padding: 20px 0;
      .text{
        font-size: 12px;
      }
    }
    .dy-md4-info{
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      .dy-md4-info-wd{
        font-size: 16px;
      }
      .dy-md4-info-text{
        font-size: 14px;
        color: #00EAFF;
      }
    }
  }
</style>
